<template>
  <AppCover section="link" :bgURL="coverURL" :bgPrURL="coverPrURL" />
  <div id="Link">    
    <!-- 友链展示 -->
    <div class="link-friend">
      <h2>「缘」来是你</h2>      
      <ul class="content">
        <li 
          class="link-item" 
          v-for="(item, index) in linkData"
          :key="index"
          v-show="item.status"
          @click="toFriendSiteHandler(item)"
        >
          <div class="item-con">
            <img
              :src="item.avatar"
              class="avatar-img"
            />
            <div>
              <span class="site_name">{{ item.sitename }}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 自助申请 -->
    <div class="apply">
      <h2>自助申请</h2>
      <div class="content">
        <div class="left">
          <el-form :model="linkForm" :rules="rules" ref="linkForm" class="linkEditor">
            <p><span>*</span> 名称</p>
            <el-form-item prop="sitename">
              <el-input placeholder="请输入名称" v-model="linkForm.sitename" clearable> </el-input>
            </el-form-item>
            <p><span>*</span> 网址</p>
            <el-form-item prop="site">
              <el-input placeholder="请输入完整网址" v-model="linkForm.site" clearable> </el-input>
            </el-form-item>
            <p><span>*</span> 头像</p>
            <el-form-item prop="avatar">
              <el-input placeholder="请输入头像url地址" v-model="linkForm.avatar" clearable> </el-input>
            </el-form-item>
            <p>描述</p>
            <el-form-item prop="introduction">
              <el-input placeholder="请输入描述内容" v-model="linkForm.introduction" clearable> </el-input>
            </el-form-item>
          </el-form>

          <div class="submit-area">
            <el-button 
              class="apply-btn"
              type="primary"
              @click="applySubmitHandler"
            >
              提交申请
            </el-button>
            <el-button 
              class="reset-btn" 
              type="primary"
              @click="resetFormHandler"
            >
              重填
            </el-button>
            <p class="tip">（提示：带有 <span style="color:red">*</span>，表示必填项~）</p>
          </div>
          
        </div>
        <div class="right">
          <p>欢迎与本站交换友情链接，提交后需后台审核，请勿重复提交。</p>
          <p>申请须知</p>
          <p>✔ 申请前请先加上本站链接</p>
          <p>✔ 站点内容符合中国大陆地区法律的相关要求</p>
          <p>本站信息</p>
          <p style="text-decoration:underline">名称：無&emsp;夢<br>
          网址：http://www.lessmore.cc<br>
          头像：http://www.lessmore.cc/ren.png<br>
          简介：观于海者难为水</p>
          <p>长时间无法访问或对本站单方面取消友链的将会被下掉喔</p>
        </div>
      </div>       
    </div>
    <AppMsgBoard :section="sectionVal" />    
  </div>  
  <AppNav />
  <AppFooter />
</template>

<script>
import AppNav from '@/components/AppNav'
import AppCover from '@/components/AppCover'
import AppFooter from '@/components/AppFooter'
import AppMsgBoard from '@/components/AppMsgBoard'

export default {
  name: 'Link',
  components: { AppNav, AppCover, AppFooter, AppMsgBoard },
  data(){
    return{
      loading: false,
      linkData: [],
      linkForm: {
        sitename: '',
        site: '',
        avatar: '',
        introduction: ''
      },
      rules: {
        sitename: [{
          validator(rule, value, callback) {
            let reg = /^[^]{2,20}$/
            if (reg.test(value)) {
              callback()
            } else {
              callback(new Error("2-20位字符"))
            }
          },
          trigger: 'blur'
        }],
        site: [{
          validator(rule, value, callback) {
            var reg = /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/
            if (reg.test(value)) {
              callback()
            } else {
              callback(new Error("网址不符合规格"))
            }
          },
          trigger: 'blur'
        }],
        avatar: [{
          validator(rule, value, callback) {
            let reg = /(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&amp;%\$#_]*)?/
            if (reg.test(value)) {
              callback()
            } else {
              callback(new Error("url不符合规格"))
            }
          },
          trigger: 'blur'
        }]
      },
      coverURL: '/files/img/section_cover/link.jpg',
      coverPrURL: '/files/img/section_cover/link_pr.jpg',
      sectionVal: 'link'
    }
  },
  methods: {
    // 跳转至友链博客
    toFriendSiteHandler(itemData){
      window.open(itemData.site, '_blank');
    },
    // 提交申请
    applySubmitHandler() {
      this.$refs.linkForm.validate(async valid => {
        if(valid){
          let { data } = await this.$axios({
            method: 'post',
            url: '/admin/linkCreate',
            data: {
              sitename: this.linkForm.sitename,
              site: this.linkForm.site,
              avatar: this.linkForm.avatar,
              introduction: this.linkForm.introduction
            }
          })

          if(data.code){
            return this.$message.error(data.msg)
          }

          this.$message.success(data.msg)
        }else{
          return false
        }
      })
    },
    // 重置表单
    resetFormHandler(){
      this.$refs.linkForm.resetFields()
    }
  },
  async created(){
    // 请求友链列表
    let { data } = await this.$axios({
      method: 'post',
      url: '/link/getLinks'
    })

    // console.log(data);
    this.linkData = data.data    
  },
  updated(){
    this.$refs.linkForm.resetFields()
  }
}
</script>

<style lang="less" scoped>
@pageWidth: 48rem;
#Link{
  width: @pageWidth;
  margin: 3rem auto;
  
  .link-friend{
    margin: 0 auto;
    width: @pageWidth;    
    h2{
      margin-top: 20px;
      text-align: left;
      padding-left: 10px;
      border-left: 5px solid #2D3D50;
      letter-spacing: 2px;
    }
    .content{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-content: space-between;
      padding: 30px 15px 20px 0px;
      .link-item{
        margin-right: 14px;
        margin-bottom: 20px;
        padding: 0;
        cursor: pointer;
        -webkit-transition: .5s;
        -moz-transition: .5s;
        -ms-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
        width: 10rem;
        overflow: hidden;
        .item-con{
          background-color: #fff;
          border-radius: 5px;
          .avatar-img{
            width: 9rem;
            height: 9rem;
            margin: 1rem 0 0;
            border-radius: 5px;
          }
          .site_name{
            display: inline-block;
            width: 9rem;
            margin: 20px auto;
            white-space: nowrap;
            text-align: center;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
        }

        &:hover{
          transform: translateY(-4px);
          box-shadow: 0 22px 40px rgba(0, 0, 0, .2);
        }
      }
    }
  }
  .apply{
    width: @pageWidth;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 5px rgb(32 160 255 / 50%);
    box-shadow: 0 3px 5px rgb(32 160 255 / 50%);
    h2{
      margin-top: 20px;
      letter-spacing: 3px;
    }
    .content{
      width: @pageWidth;
      display: flex;
      justify-content: space-between;
      // padding: 0 20px;
      .left{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        margin-left: 15px;
        .linkEditor{
          p{
            span{
              color: red;
            }
            width: 90%;
            text-align: left;
            font-size: 1rem;
            margin-bottom: 5px;
          }
          :deep(.el-form-item){
            width: 20rem;
          }
        }
        .submit-area{
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          // width: 16rem;
          width: 90%;
          .apply-btn{
            border: none;
            border-radius: 4px;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            font-family: Lato,sans-serif;
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 1px;
            line-height: 1;
            outline: none;
            text-align: center;
            background-color: #34495e;
          }
          .reset-btn{
            border: none;
            border-radius: 4px;
            cursor: pointer;
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 1px;
            outline: none;
            padding: 0 18px;
            text-align: center;
            position: relative;
            color: #333333;
            background-color: #EFEFEF;
          }
          .tip{
            text-align: left;
            margin-top: 5px;
          }
        }
      }
      .right{
        flex: 1;
        margin-bottom: 20px;
        margin-right: 15px;
        padding: 25px;
        border-radius: 8px;
        background: linear-gradient(-125deg,#0295f9 0%, #2f49fd 100%);          
        display: flex;
        flex-direction: column;
        align-items: left;
        p{
          color: #fff;
          text-align: left;
          margin: 15px 0;
          font-size: 1rem;
          // line-height: 1.5rem;
        }
      }
    }
  }
}

:deep(.el-card){
  border: none;
}

:deep(.el-card.is-always-shadow){
  box-shadow: none;
}



/* 很小的设备（手机等，小于 600px） */
@media only screen and (max-width: 600px) { 
  #Link {
    width: 100%;    
    padding: 0 20px;
    box-sizing: border-box;
  }
  #Link .link-friend{
    width: 100%;
    .content{
      width: 29rem;
      margin: 0 auto;
      .link-item{
        margin-left: 12px;
        margin-right: 12px;
        width: 12rem;
      }
    }
  }
  #Link .apply{
    margin: 0 auto;
    width: 100%;
  }
  #Link .apply .content{
    flex-direction: column;
    width: 100%;
    .left{
      p{
        font-size: 1.4rem;
      }
    }
  }
  #Link .apply .content .left .linkEditor{
    p{
      font-size: 1.4rem;
    }
    :deep(.el-form-item){
      width: 81vw;
    }
  }  
  #Link .apply .content .left .submit-area{
    width: 20rem;
    .apply-btn, .reset-btn{
      font-size: 1.2rem;
    }
  }  
  #Link .apply .content .right{
    margin-left: 15px;
    margin-top: 20px;
    p{
      font-size: 1.4rem;
    }
  }
}

/* 比较小的设备（竖屏的平板，屏幕较大的手机等, 大于 600px） */
@media only screen and (min-width: 600px) { 
  #Link {
    min-width: 34rem;
  }
}

/* 中型大小设备（横屏的平板, 大于 768px） */
@media only screen and (min-width: 768px) { 
  #Link {
    min-width: 38rem
  }
}

/* 大型设备（电脑, 大于 992px） */
@media only screen and (min-width: 992px) { 
  #Link {
    min-width: 44rem;
  }
}

/* 超大型设备（大尺寸电脑屏幕, 大于 1200px） */
@media only screen and (min-width: 1200px) { 
  #Link {
    min-width: 48rem;
  }
}
</style>